import React, { Component } from "react";
import styles from "./index.module.scss";
// 组件

// 插件
import { Table } from "antd";
import classNames from "classnames";
import ReactEcharts from "echarts-for-react";

export default class Category extends Component {
  constructor(props) {
    super(props);
    this.state = {
      recordType: this.props.defaultType,
    };
  }

  componentDidMount() {}
  componentDidUpdate(prevProps, prevState) {}
  render() {
    const { categories } = this.props;
    const { recordType } = this.state;
    return (
      <div className={styles.category}>
        <div className="toolbar">
          <span className="close" onClick={this.props.close}>
            &lt;-
          </span>
          <span className="types"
            onClick={e => {
              // console.log('e.target', e.target.textContent)
              this.setState({
                recordType: e.target.textContent
              })
            }}>
            <span className={classNames('outcome', {'active' : recordType == '支出' })}>支出</span>
            <span className={classNames('income', {'active' : recordType == '收入'} )}>收入</span>
          </span>
          <span className="addCategory">+</span>
        </div>
        <div className="category">
          {
            categories.filter(c => {
              return c.type == (recordType == '支出' ? 1 : 0) 
            }).map(c => {
              return (
                <span 
                  className={classNames("categoryItem")} 
                  key={c.id}
                  onClick={() => {
                    this.setState({
                      categoryId: c.id
                    })
                  }}
                  >
                  {c.name}
                </span>
              )
            })
          }
        </div>
      </div>
    );
  }
}
